<template>
  <!-- 建筑垃圾产生趋势 -->
  <div :class="className" :style="{height:height,width:width}"/>
</template>

<script>
import * as echarts from 'echarts'

require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

import { timeTypeStatic } from "@/api/wasterTran/static";

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    // chartData: {
    //   type: Array,
    //   required: true
    // }
  },
  data() {
    return {
      chart: null,
      chartData: null,
      // xAxisData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月',],
      xAxisData: [],
      // qualityData: [100, 120, 152, 134, 111, 222, 245, 214, 365, 124, 256, 189], // 建筑垃圾转运量
      qualityData: [], // 建筑垃圾转运量
      countData: [], // 建筑垃圾运输次数
    }
  },
  watch: {
    // chartData: {
    //   deep: true,
    //   handler(val) {
    //     console.log(val, 'chartData')
    //     for(let i=0; i<this.chartData.length;i++){
    //       this.xAxisData.push(this.chartData[i].time)
    //       this.qualityData.push(this.chartData[i].quality)
    //       this.countData.push(this.chartData[i].count)
    //     }
    //     this.setOptions(val)
    //   }
    // }
  },
  mounted() {
    // this.$nextTick(() => {
    //   this.initChart()
    // })
    this.getTimeType()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    
    // 获取建筑垃圾产生趋势
    getTimeType() {
      this.chart = echarts.init(this.$el, 'macarons')
      console.log('getTimeType')
      let body = {
          type:1 //按月统计
      }
      timeTypeStatic(body).then(response => {
        console.log(response)
        this.chartData = response.data
        for(let i=0; i<this.chartData.length;i++){
          this.xAxisData.push(this.chartData[i].time)
          this.qualityData.push(this.chartData[i].quality)
          this.countData.push(this.chartData[i].count)
        }
        this.setOptions(this.chartData)
      })
    },
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      for(let i=0; i<this.chartData.length;i++){
        this.xAxisData.push(this.chartData[i].time)
        this.qualityData.push(this.chartData[i].quality)
        this.countData.push(this.chartData[i].count)
      }
      console.log(this.xAxisData, 'this.xAxisData')
      console.log(this.qualityData, 'this.qualityData')
      console.log(this.countData, 'this.countData')
      this.setOptions(this.chartData)
    },
    setOptions({expectedData, actualData} = {}) {
      this.chart.setOption({
        xAxis: {
          data: this.xAxisData,
          boundaryGap: false,
          axisTick: {
            show: false
          }
        },
        grid: {
          left: 10,
          right: 10,
          bottom: 20,
          top: 30,
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          padding: [5, 10]
        },
        yAxis: {
          axisTick: {
            show: false
          },
          // data: [100, 120, 152, 134, 111, 222, 245, 214, 365, 124, 256, 189]
        },
        legend: {
          data: ['建筑垃圾转运量(吨)', '建筑垃圾运输次数']
        },
        series: [{
          name: '建筑垃圾转运量(吨)', itemStyle: {
            normal: {
              color: '#FF005A',
              lineStyle: {
                color: '#FF005A',
                width: 2
              }
            }
          },
          smooth: true,
          type: 'line',
          data: this.qualityData,
          animationDuration: 2800,
          animationEasing: 'cubicInOut'
        },{
          name: '建筑垃圾运输次数', itemStyle: {
            normal: {
              color: '#5ab1ef',
              lineStyle: {
                color: '#5ab1ef',
                width: 2
              }
            }
          },
          smooth: true,
          type: 'line',
          data:  this.countData,
          animationDuration: 2800,
          animationEasing: 'cubicInOut'
        }]
      })
    }
  }
}
</script>
